
export const NavBar = {
  data() {
    return {
      items: []
    }
  },

  created() {
    this.items = this.$parent.$children.reduce((res, vm) => {
      if (vm.$children[0] && vm.$children[0].$options.name === 'ElCard') {
        res.push({
          title: vm.$children[0].header,
          el: vm.$el
        })
      }
      return res
    }, [])
  },

  template: `
    <ul class="nav-bar">
      <li style="color: #9e9e9e;font-size: 13px;cursor:default;margin-bottom: 20px">目录</li>
      <li
        v-for="item in items"
        :key="item.title"
        @click="scrollTo(item)"
      >
        {{ item.title }}
      </li>
    </ul>
  `,

  methods: {
    scrollTo({ el }) {
      document.documentElement.scrollTop = el.offsetTop - 100
    }
  }
}